<template>
    <div>

        <!-- 热点轮播图 -->
        <!-- indicator-position="none"-->
         <el-carousel   @change="upSide" :interval="3000" height="420px"  arrow="never"  :initial-index="hotIndex"    class="hot-banner" ref="hotBanner">
            <el-carousel-item v-for="(item,i)  in hotList" :key="i">
                <img :src="item.commendImg" alt="">
            </el-carousel-item>
            <div class="wrap">
                <div class="slider-nav">
                    <router-link  :class="{'title-act':hotIndex==i}" :to="{name:'play',query:{data:JSON.stringify(item)}}"   v-for="(item,i) in hotList"  :key="i">
                        <p @mouseover="hotLight(i)" class="slider-title tl sign-colon">
                            <span class="slider-name" >{{item.name}}<i v-show="hotIndex!=i">:</i></span>
                            {{item.commendInfo}}
                        </p>
                    </router-link>
                </div>
            </div>
        </el-carousel>

        <!-- 主导航 -->
        <div class="wrap">
            <div class="main-nav shadow-box">
                <ul class="main-list flex">
                    <li class="tc"  >
                        <router-link v-for="(item,i) in typeList.slice(0,6)" :key="i" :to="{name:'channel',query:{tags:item.name}}">{{item.name}}</router-link>
                        <!-- <router-link to="name:home">动画</router-link>
                        <router-link to="name:home">游戏</router-link>
                        <router-link to="name:home">广告</router-link>
                        <router-link to="name:home">专题</router-link> -->
                    </li>
                    <li class="tc">
                      <router-link v-for="(item,i) in typeList.slice(6,12)" :key="i" :to="{name:'channel',query:{tags:item.name}}">{{item.name}}</router-link>
                    </li>
                    <li class="tc">
                    </li>
                    <li class="tc">
                        <router-link to="/channel"><i class="act el-icon-menu"></i>全部</router-link>
                        <router-link to="name:home"><i class="act el-icon-sort"></i>排行版</router-link>
                        <router-link to="name:home"><i class="act el-icon-service"></i>联系我们</router-link>
                    </li>
                </ul>
            </div>

            <!-- 分类导航 -->
            <div class="shadow-box">
                <div class="shadow-title flex">
                    <h3>
                        <i class="act el-icon-menu"></i>
                        主推榜
                    </h3>
                    <router-link :to="{name:'channel',query:{tags:'主推榜'}}">更多</router-link>
                       
                    
                </div>
                <div class="video-pre flex"  @mouseleave="hidePre()">
                    <div class="pre-box" v-for="(item,i) in indexData['主推榜']" :key="i">
                        <!-- 预览图 -->
                        <div class="pre-img tl">
                            <router-link  to="path:'/home'"  >
                                <span class="score">0.8</span>
                                <el-image ref="preImg" @mouseenter="showPre(i)" 
                            class="img"
                            :src="item.preImg"
                            fit="cover"></el-image>
                                <!-- <img ref="preImg" @mouseenter="showPre(i)"  src="../../static/imgs/sjmn.jpg" alt=""> -->
                            </router-link>
                            <router-link class="pre-name" :to="{path:'/play',query:{data:JSON.stringify(item)}}">
                                {{item.name}} 
                            </router-link>
                            <span class="des sign-colon">
                                {{item.commendInfo}}
                            </span>
                        </div>
                        <!-- 预览视频 -->
                         <div class="pre-video"  v-show="preIndex===i"  @mouseleave="hidePre(i)">
                            <router-link  :to="{name:'play',query:{data:JSON.stringify(item)}}" >
                                <video autoplay="autoplay"  muted="true" :src="item.preVideo"></video>
                            </router-link>
                            <!--  -->
                            <i class="el-icon-bell"  @click="giveVolume" v-show="!isOperate"></i>
                            <i class="el-icon-message-solid"  @click="closeVolume" v-show="isOperate"></i>
                            <router-link  :to="{name:'detail',query:{name:item.name}}">
                                <h3>
                                    {{item.name}}
                                </h3>
                            </router-link>
                             <p class="des tl ">
                               <el-tag type="info" size="small">{{new Date(item.created_at).getFullYear()}}</el-tag>
                               <el-tag type="info" size="small">{{item.tags[0].name}}</el-tag>
                            </p>
                          
                            <p class="des des-pre tl more-colon">
                               简介:  {{item.des}}
                            </p>
                             
                               <router-link :to="{name:'play',query:{data:JSON.stringify(item)}}" class="go-play">
                              <el-tag type="success">立即播放</el-tag>
                              </router-link>
                         </div>
                    </div>

                    
                </div>
            </div>

              <!-- 宣传位1 -->
            <div class="conduct ">
            </div>

            <!-- 分类区别 -->
            <div class="shadow-box" v-for="(v,k,i) in indexData" :key="i" v-if="k!='主推榜'&&k!='图片设计'">
               <div class="shadow-title flex">
                    <h3>
                        <i class="act el-icon-menu"></i>
                        {{k}}
                    </h3>
                    <router-link :to="{name:'channel',query:{tags:k}}">更多</router-link>
                </div>
                <div class="normal-box flex" >
                   <div class="box tl" v-for="(item,i) in v" :key="i"> 
                    <router-link :to="{name:'detail',query:{name:item.name}}">
                      <el-image ref="preImg" 
                          class="img"
                          :src="item.preImg"
                          fit="cover"></el-image>
                    </router-link>
                    <router-link class="name" :to="{name:'detail',query:{name:item.name}}">
                      {{item.name}}
                    </router-link>
                    <span>{{item.commendInfo}}</span>
                  </div>
                </div>
            </div>

            <div class="shadow-box">
               <div class="shadow-title flex">
                    <h3>
                        <i class="act el-icon-menu"></i>
                        动画
                    </h3>
                    <router-link to="name:home">更多</router-link>
                </div>
                <div class="normal-box flex">
                   <div class="box tl" v-for="(item,i) in sportList2" :key="i"> 
                    <router-link :to="{name:'detail',query:{name:item.name}}">
                      <el-image ref="preImg" 
                          class="img"
                          :src="item.preImg"
                          fit="cover"></el-image>
                    </router-link>
                    <router-link class="name" :to="{name:'detail',query:{name:item.name}}">
                      {{item.name}}
                    </router-link>
                    <span>{{item.commendInfo}}</span>
                  </div>
                </div>
            </div>


            
            <!-- 图片拼接 -->
             <div class="shadow-box">
               <div class="shadow-title flex">
                    <h3>
                        <i class="act el-icon-menu"></i>
                        图片设计
                    </h3>
                    <router-link :to="{name:'channel',query:{tags:'图片设计'}}">更多</router-link>
                </div>
                <div class="pic-box flex">
                  <div class="box tl"  v-for="(item,i) in indexData['图片设计']" :key="i"> 
                    <router-link  to="name:home" >
                      <div class="pic-bg" @mousemove="picPosition">
                        <img   :src="item.commendImg">
                        <p class="progress-view">
                          <span class="per"></span>
                        </p>
                      </div>
                    </router-link>
                    <router-link :to="{name:'detail',query:{name:item.name}}" class="name">
                      {{item.name}}
                    </router-link>
                    <span class="sub-title">{{item.commendInfo}}</span>
                  </div>
                </div>
            </div>

            <!-- 面包屑推荐区 -->
            <div class="bread-recom wrap flex">
              <router-link to="name:home" v-for="(item,i) in [1,2,3,4,5]" :key="i">
                <img src="../../static/imgs/bread-auth1.png" alt="">
                <img src="../../static/imgs/bread-bg1.jpg" alt="">
              </router-link>
            </div>

          

           

        </div>

        <!-- 导播推荐 -->
        <div class="direct">
          <img class="direct-title" src="http://qn.ty8000.com/image/title.png" alt="" >
          <div class="container wrap">
            <div class="mask-left"></div>
            <a class="arrow-left" href="javascript:void(0)"></a>
            <div class="swiper-container swiper-container-horizontal" id="direct">
              <div class="swiper-wrapper" >
                <div class="swiper-slide " v-for="i in 15" :key="i" >
                  <a href="#" class="star-link">
                    <img src="http://qn.ty8000.com/image/girl2.jpg">
                    <div class="direct-line"></div>
                    <div class="stars-info">
                      <div class="name sign-colon">我是导播</div>
                      <div class="intro">快来支持我吧</div>
                      <div class="icon-direct-live"></div>
                      <div class="number">
                        <i></i>2100
                      </div>
                    </div>
                  </a>
                </div>
                
              </div>
            </div>
            <div class="mask-right"></div>
            <a class=" arrow-right" href="javascript:void(0)"></a>
          </div>
        </div>

        <!-- 友情链接 -->
        <div class="shadow-box wrap">
            <div class="shadow-title flex">
                <h3>
                    友情链接
                </h3>
            </div>
            <div class="friend-link flex">
              <a href="/#" v-for="i in 14" :key="i">
              </a>
            </div>
        </div>
      
    </div>
</template>
<style lang="scss" scoped>
.go-play {
  position:absolute;
  right:15px;
}
// 热点轮播图
.hot-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  button {
    min-height: 3px;
  }
  .is-active {
    button {
      background: #409eff;
      height: 5px;
    }
  }
  .slider-nav {
    position: absolute;
    background: #fff;
    width: 240px;
    padding: 30px 0;
    height: 420px;
    background: rgba(32, 32, 32, 0.65);
    z-index: 9;
    top: 70px;
    right: 0;
    width: 240px;
    .router-link-active {
      display: block;
    }
    .title-act {
      .slider-name {
        margin-bottom: 10px;
        display: block;
        font-size: 24px;
        color: #2fb3ff;
      }
      .slider-title {
        color: #666;
        background-color: rgba(255, 255, 255, 0.8);
      }
    }
    .slider-title {
      padding: 10px 15px;
      color: #ccc;
      font-size: 14px;
    }
  }
}
// 主导航
.main-nav {
  .main-list {
    li {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      margin-right: 20px;
      height: 48px;
      border-right: 2px solid #f3f3f3;
      &:last-child {
        align-items: center;
      }
      a {
        width: 33.3%;
        color: #666;
        &:hover {
          color: #2692ff;
        }
      }
      i {
        margin-bottom: 2px;
        display: block;
        font-size: 20px;
      }
      .act {
        color: #2692ff;
      }
    }
  }
}
// 视频预览
.video-pre {
  justify-content: flex-start;
  .pre-box {
    position: relative;
    max-width: 16.7%;
    padding: 10px;
    .pre-img {
      position: relative;
      .img {
        width: 170px;
        height: 255px;
      }
      .score {
        position: absolute;
        top: 5px;
        left: -5px;
        padding: 0 5px;
        text-align: right;
        font-size: 12px;
        background-color: #fc3f4c;
        color: #fff;
        &::before {
          content: "";
          position: absolute;
          left: 1px;
          bottom: -4px;
          border-top: 4px solid #fc3f4c;
          border-left: 4px solid transparent;
        }
      }
      .pre-name {
        margin-top: 10px;
        display: block;
        color: #333;
      }
      .des {
        margin-top: 5px;
        font-size: 12px;
        color: #999;
      }
    }
    .pre-video {
      position: absolute;
      width: 120%;
      height: 100%;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      z-index: 9;
      background: #fff;
      box-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
      video {
        width: 100%;
        height: 50%;
        background: #000;
      }
      i {
        position: absolute;
        z-index: 9;
        top: 135px;
        right: 10px;
        font-size: 20px;
        color: #fff;
      }
      h3 {
        margin: 10px auto 10px;
        font-size: 18px;
        font-weight: 700;
        color: #202020;
      }
      .des {
        margin-bottom: 5px;
        padding: 0 15px;
        font-size: 12px;
        color: #7a7a7a;
      }
    }
  }
}
.conduct {
  margin: 20px auto;
  height: 50px;
  background: url(//puui.qpic.cn/tv/0/24914812/0) repeat-x left top;
}

// 普通列表
.normal-box {
  justify-content: flex-start;
  .box {
    margin-right: 10px;
    width: 16%;
    .img {
      width: 100%;
      height: 105px;
      background: #000;
    }
    .name {
      display: block;
      margin-top: 10px;
      color: #333;
    }
    span {
      margin-top: 5px;
      color: #999;
    }
  }
}

// 图片缩略
.pic-box {
  justify-content: flex-start;
  .box {
    position: relative;
    margin-right: 10px;
    width: 187px;
    &:first-child {
    }
    a {
      display: block;
    }
    .pic-bg {
      overflow: hidden;
      height: 105px;
      background-size: 361px 204px;
      img {
        // 原始图作为图片
        position: relative;
        width: 561px;
      }
      &:hover {
        .progress-view {
          display: block;
        }
      }
    }
    .progress-view {
      position: absolute;
      display: none;
      top: 4px;
      left: 50%;
      height: 4px;
      transform: translateX(-50%);
      width: 95%;
      background-color: rgba(255, 255, 255, 0.5);
      .per {
        position: absolute;
        display: block;
        width: 0;
        height: 4px;
        background: #fff;
      }
    }
    img {
      background: #000;
    }
    .name {
      display: block;
      margin-top: 10px;
      color: #333;
    }
  }
  .sub-title {
    margin-top: 5px;
    color: #999;
  }
}

// 面包线推荐区
.bread-recom {
  overflow: hidden;
  margin-top: 20px;
  a {
    position: relative;
    margin-right: 2px;
    width: 238px;
    img {
      &:first-child {
        position: absolute;
        top: 15px;
        left: 0;
        width: 98px;
        transition: all 0.75s ease;
        -webkit-transition: all 0.75s ease;
      }
      &:nth-child(2) {
        width: 100%;
        height: 82px;
        background: #fff;
      }
    }
    &:hover {
      img {
        &:first-child {
          top: 0;
        }
      }
    }
  }
}

// 友情链接
.friend-link {
  flex-wrap: wrap;
  justify-content: flex-start;
  border-left: 1px solid #e2e2e2;
  border-top: 1px solid #e2e2e2;
  a {
    width: 14.28%;
    height: 60px;
    background: url("../../static/imgs/partner.png") no-repeat;
    border: 1px solid #e2e2e2;
    border-top: transparent;
    border-left: transparent;
    &:first-child {
    }
  }
}

.direct {
  overflow: hidden;
  margin: 20px auto 0;
  padding-top: 20px;
  background: #fff;
  background: url(http://qn.ty8000.com/image/bg.jpg) no-repeat center top;
  .direct-title {
    margin-bottom: 10px;
  }
  .container {
    position: relative;
    .mask-left {
      position: absolute;
      left: -1000px;
      width: 1000px;
      top: 0;
      opacity: 0.7;
      background: #000;
      height: 240px;
      z-index: 10;
    }
    .mask-right {
      position: absolute;
      right: -1000px;
      width: 1000px;
      top: 0;
      opacity: 0.7;
      background: #000;
      height: 240px;
      z-index: 10;
    }
    .arrow-left {
      position: absolute;
      left: -40px;
      top: 50%;
      background: url(http://qn.ty8000.com/image/arrows.png) no-repeat left top;
      margin-top: -40px;
      width: 35px;
      height: 80px;
      z-index: 15;
    }
    .arrow-right {
      background: url(http://qn.ty8000.com/image/arrows.png) no-repeat right top;
      position: absolute;
      right: -40px;
      top: 50%;
      margin-top: -40px;
      width: 35px;
      height: 80px;
      z-index: 15;
    }
    .swiper-container {
      overflow: visible;
      height: 240px;
      .swiper-slide {
        width: 240px;
        height: 100%;
        background: #000;
        .star-link {
          &:hover {
            .stars-info {
              height: 95px;
              border-bottom: 0 none;
            }
            .direct-line {
              height: 95px;
              background-color: #1dd388;
              opacity: 0.8;
            }
            .icon-direct-live {
              display: none;
            }
          }
        }
        img {
          width: 240px;
          height: 240px;
          opacity: 0.7;
          -webkit-transition: all linear 300ms;
          transition: all linear 300ms;
        }
        .direct-line {
          position: absolute;
          bottom: 0;
          height: 4px;
          width: 100%;
          opacity: 1;
          -webkit-transition: all linear 300ms;
          transition: all linear 300ms;
          background-color: #1dd388;
        }
        // 导播信息
        .stars-info {
          position: absolute;
          bottom: 0;
          height: 110px;
          text-align: center;
          width: 100%;
          -webkit-transition: all linear 250ms;
          transition: all linear 250ms;
          color: #fff;
          .name {
            margin-top: 8px;
            font-size: 20px;
            height: 26px;
            line-height: 26px;
          }
          .intro {
            font-size: 14px;
            height: 18px;
            line-height: 18px;
            margin: 5px 0 30px;
            color: rgba(255, 255, 255, 0.7);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .icon-direct-live {
            position: absolute;
            left: 50%;
            bottom: 38px;
            width: 29px;
            height: 9px;
            margin-left: -15px;
            background: url(http://qn.ty8000.com/image/live.png) no-repeat;
            opacity: 1;
            -webkit-transition: all linear 250ms;
            transition: all linear 250ms;
          }
          .number {
            display: inline-block;
            overflow: hidden;
            -webkit-transition: all linear 250ms;
            transition: all linear 250ms;
            height: 20px;
            line-height: 20px;
            width: 100%;
            position: absolute;
            bottom: 8px;
            left: 0;
            i {
              width: 16px;
              height: 12px;
              display: inline-block;
              background: url(http://qn.ty8000.com/image/eye.png) no-repeat
                center;
              margin-right: 8px;
            }
          }
        }
        a {
          color: #333;
        }
      }
    }
  }
}
</style>
<script >
import $ from "jquery";
import Swiper from "swiper";
import { hotBanner, hotSport,searchType } from "../api/index";
export default {
  data() {
    return {
      //热点轮播图
      hotIndex: 0,
      hotList: [],
      // 最近更新/今日热点
      sportList: [],
      sportList2:[],
      //   视频预览
      preIndex: "",
      //   是否交互过
      isOperate: false,
      indexData:{},
      typeList:[],
    };
  },
  methods: {
    getType(type) {
      searchType({
        page: 0,
        pageSize:20
      }).then(res => {
         this.typeList=res.data.data;
        })
        .catch(err => {
          this.listLoading = false;
          console.log(err);
        });
    },
    //   热点轮播导航高亮
    hotLight(i) {
      this.hotIndex = i;
      this.$refs.hotBanner.setActiveItem(i);
    },
    // 更新侧边导航
    upSide(val) {
      this.hotIndex = val;
    },
    // 视频预览
    showPre(i) {
      this.preIndex = i;
      let preVideo = document.querySelectorAll(".pre-video")[this.preIndex];
      // if(preVideo.querySelector('.el-icon-close').style.display=='none') {
      this.volumeSwitch(1);
      // }
      setTimeout(function() {
        preVideo.querySelector("video").play();
      }, 0);
      console.log(1);
    },
    hidePre(i, e) {
      // 取消播放
      // document.querySelectorAll('video').forEach((ele)=>{
      //   ele.muted=false;
      // })
      let preVideo = document.querySelectorAll(".pre-video")[this.preIndex];
      document.querySelectorAll("video").forEach(ele => {
        ele.pause();
        console.log("cancel");
      }, 0);
      this.preIndex = "";
    },

    // 引导交互声音/video自动播放前提是静音
    giveVolume(e) {
      this.volumeSwitch(1);
    },
    closeVolume(e) {
      this.volumeSwitch(2);
    },
    // 改变声音
    volumeSwitch(i) {
      let preVideo = document.querySelectorAll(".pre-video")[this.preIndex];
      if (i == 1) {
        // 开启声音
        preVideo.querySelector(".el-icon-message-solid").style.display =
          "block";
        preVideo.querySelector(".el-icon-bell").style.display = "none";
        preVideo.querySelector("video").muted = false;
        // preVideo.querySelector("video").autoplay = true;
      } else {
        // 关闭声音
        preVideo.querySelector(".el-icon-message-solid").style.display = "none";
        preVideo.querySelector(".el-icon-bell").style.display = "block";
        preVideo.querySelector("video").muted = true;
        // preVideo.querySelector("video").autoplay = false;
      }
    },
    // 图片预览
    picPosition(e) {
      let ele = $(e.target)
        .parent()
        .find("img");
      let boxWidth = 187;
      let boxHeight = 105;
      let per =
        (e.pageX - ele.parent().offset().left) / $(".pic-bg").width() * 100;
      // 设置百分比
      ele
        .siblings()
        .find(".per")
        .css("width", per + "%");
      if (per <= 12.5) {
        ele.css({ left: 0, top: 0 });
      } else if (12.5 < per && per <= 25) {
        ele.css({ top: 0, left: -1 * boxWidth + "px" });
        // ele.css('background-position',-1*boxWidth+'px top')
      } else if (25 < per && per <= 37.5) {
        ele.css({ top: 0, left: -2 * boxWidth + "px" });
        // ele.css('background-position',-2*boxWidth+'px top')
      } else if (37.5 < per && per <= 50) {
        ele.css({ top: -boxHeight * 1 + "px", left: 0 });
        // ele.css('background-position','left -'+boxHeight*1+'px')
      } else if (50 < per && per <= 62.5) {
        ele.css({ top: -boxHeight * 1 + "px", left: -1 * boxWidth + "px" });
        // ele.css('background-position',-1*boxWidth+'px -'+boxHeight*1+'px')
      } else if (62.5 < per && per <= 75) {
        ele.css({ top: -boxHeight * 1 + "px", left: -2 * boxWidth + "px" });
        // ele.css('background-position',-2*boxWidth+'px -'+boxHeight*1+'px')
      } else if (75 < per && per <= 87.5) {
        ele.css({ top: -boxHeight * 2 + "px", left: 0 });
        // ele.css('background-position','left -'+boxHeight*2+'px')
      } else if (87.5 < per && per <= 100) {
        ele.css({ top: -boxHeight * 2 + "px", left: -1 * boxWidth + "px" });
        // ele.css('background-position',-1*boxWidth+'px -'+boxHeight*2+'px')
      }
      // let per=e.clientX
    }
  },
  mounted() {
    // h5 video静音才能自动播放 监听产生交互默认开启声音
    let that = this;
    this.getType();
    //  $('body').one('click keydown',function() {
    //     if (!that.isOperate) {
    //     console.log('chnageoparate')
    //     that.isOperate = true;
    //   }
    //  })

    var dirSwiper = new Swiper("#direct", {
      loop: true,
      onlyExternal: true,
      // 同时显示
      slidesPerView: 5,
      // 几张一组
      slidesPerGroup: 5,
      loopedSlides: 20,
      // loopAdditionalSlides : 20,
      // paginationClickable: true,
      autoplay: 3000,
      nextButton: ".arrow-left",
      prevButton: ".arrow-right",
      onSlideChangeEnd: function(swiper) {
        if (swiper.activeIndex == 40) {
          swiper.swipeTo(0, 0);
        }
      }
    });
  },
  created() {
    hotBanner()
      .then(res => {
        this.hotList = res.data;
      })
      .catch(err => {
        console.log(err);
      });
    hotSport({}).then(res => {
        this.sportList = res.data.data;
        console.log(res.data.data);
        let data=res.data.data,arr;
        this.indexData=data;
        this.sportList=data['主推榜'];
      })
      .catch(err => {
        console.log(err);
      });

    this.isOperate = false;

    //   是否静音 浏览器安全策略未点击前禁止自动播放声音
    // document.querySelectorAll("video").forEach(ele => {
    //   ele.muted = true;
    // });
  }
};
</script>

